<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品图片放大</title>
    <style>
        .imgbox{
            width: 375px;
            height: 500px;
            position: relative;
        }
        .imgbox img{
            width: 375px;
            height: 500px;
        }
        .imgbox_copy{
            width: 375px;
            height: 500px;
            position: absolute;
            left:500px;
            top: 0;
            overflow: hidden;
            display: none;
        }
        .imgbox_copy img{
            width: 750px;
            height: 1000px;
            position: absolute;
            left: 0;
            top:0;
        }
        .mask{
            width: 188px;
            height: 250px;
            background-color: black;
            opacity: 0.5;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .cover{
            width: 375px;
            height: 500px;
            position: absolute;
            left: 0;
            top:0;
            z-index: 9;
            cursor:move;
        }
    </style>
</head>
<body>
    <div class="imgbox">
        <img src="./1.avif" alt="">
        <div class="imgbox_copy">
            <img src="./1.avif" alt="">
        </div>
        <div class="mask"></div>
        <div class="cover"></div>
    </div>
    <script>
        const imgbox=document.querySelector(".imgbox");
        const copy=document.querySelector(".imgbox_copy");
        const mask=document.querySelector(".mask");
        const cover=document.querySelector(".cover");
        const img=document.querySelector(".imgbox_copy img");
        imgbox.onmouseenter=()=>{
            copy.style.display="block";
            mask.style.display="block";
        }
        imgbox.onmouseleave=()=>{
            copy.style.display="none";
            mask.style.display="none";
        }
        cover.onmousemove=(e)=>{
            let l=e.offsetX-94;
            let t=e.offsetY-125;
            if(l<0){
                l=0;
            }
            if(l>187){
                l=187;
            }
            if(t<0){
                t=0;
            }
            if(t>250){
                t=250;
            }
            mask.style.left=l+"px";
            mask.style.top=t+"px";
            img.style.left=-2*l+"px";
            img.style.top=-2*t+"px";
        }
    </script>
</body>
</html>